<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20-爱好选择器（原生）</title>
</head>

<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>

    <script>

        /**
         * 1. 点击'全选': 选中所有爱好
         * 2. 点击'全不选': 所有爱好都不勾选
         * 3. 点击'反选': 改变所有爱好的勾选状态
         * 4. 点击'提交': 提示所有勾选的爱好
         * 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
         * 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
        */

        /**
         * 1. 点击'全选': 选中所有爱好
        */
        const checkedAllBtn = document.querySelector('#checkedAllBtn')
        checkedAllBtn.addEventListener('click', () => {
            let hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            hobbyArr.forEach((element) => {
                element.checked = true
            })
            // hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            hobbyArr = Array.prototype.slice.call(hobbyArr)
            hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            console.log(hobbyArr)
            const checkedAllBox = document.querySelector('#checkedAllBox')
            for (let i = 0; i < hobbyArr.length; i++) {
                if (!hobbyArr[i].checked) {
                    checkedAllBox.checked = false
                    break
                } else {
                    checkedAllBox.checked = true
                }
            }
        })

        /**
         * 2. 点击'全不选': 所有爱好都不勾选
        */
        const checkedNoBtn = document.querySelector('#checkedNoBtn')
        checkedNoBtn.addEventListener('click', () => {
            let hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            hobbyArr.forEach((element) => {
                element.checked = false
            })
            hobbyArr = Array.prototype.slice.call(hobbyArr)
            hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            console.log(hobbyArr)
            const checkedAllBox = document.querySelector('#checkedAllBox')
            for (let i = 0; i < hobbyArr.length; i++) {
                if (!hobbyArr[i].checked) {
                    checkedAllBox.checked = false
                    break
                } else {
                    checkedAllBox.checked = true
                }
            }
        })

        /**
         * 3. 点击'反选': 改变所有爱好的勾选状态
        */
        const checkedRevBtn = document.querySelector('#checkedRevBtn')
        checkedRevBtn.addEventListener('click', () => {
            let hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            hobbyArr.forEach((element) => {
                element.checked = !element.checked
            })
            hobbyArr = Array.prototype.slice.call(hobbyArr)
            hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            console.log(hobbyArr)
            const checkedAllBox = document.querySelector('#checkedAllBox')
            for (let i = 0; i < hobbyArr.length; i++) {
                if (!hobbyArr[i].checked) {
                    checkedAllBox.checked = false
                    break
                } else {
                    checkedAllBox.checked = true
                }
            }
        })

        /**
         * 4. 点击'提交': 提示所有勾选的爱好
        */
        const sendBtn = document.querySelector('#sendBtn')
        sendBtn.addEventListener('click', () => {
            const hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            hobbyArr.forEach((element) => {
                if (element.checked) console.log(element.value)
            })
        })

        /**
         * 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
        */
        const checkedAllBox = document.querySelector('#checkedAllBox')
        checkedAllBox.addEventListener('click', function () {
            const hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
            hobbyArr.forEach((element) => {
                element.checked = this.checked
            })
        })

        /**
         * 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
        */
        let hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
        hobbyArr = Array.prototype.slice.call(hobbyArr)
        hobbyArr.map((element) => {
            element.addEventListener('click', () => {
                hobbyArr = document.querySelectorAll('input[type=checkbox][name=items]')
                hobbyArr = Array.prototype.slice.call(hobbyArr)
                console.log(hobbyArr)
                const checkedAllBox = document.querySelector('#checkedAllBox')
                for (let i = 0; i < hobbyArr.length; i++) {
                    if (!hobbyArr[i].checked) {
                        checkedAllBox.checked = false
                        break
                    } else {
                        checkedAllBox.checked = true
                    }
                }
            })
        })

    </script>
</body>

</html>